<template>
  <div class="index-wrap">
    <van-nav-bar
        title="积分商城"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    <div class="header-wrap">
      <div class="header clearfix">
        <div>
          <div class="l" style="min-width: 60%">
            <van-row v-if="userInfo">
              <van-col span="8">
                <p style="margin-bottom:0">
                  <van-image round width="50" height="50" :src="userInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg' " />
                </p>
                <h3 style="margin: .45rem 0 ;width: 100px;">我的积分 {{userInfo.account.integral}} </h3>
              </van-col>
              <van-col span="16" class="title">
                <p>{{userInfo.nickname}}</p>
                <p>
                  大众会员
                </p>
              </van-col>
            </van-row>
          </div>
          <div class="r">
            <router-link :to="{path:'/integral/rule',query: {type: 'integral'}}">
              <span>
                积分规则
                <van-icon name="arrow" />
              </span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- <van-grid>
      <van-grid-item
        v-for="value in 4"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid> -->

     <!-- start banner 广告 -->
    <div class="banner-swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(data, index) in bannerImage" :key="index">
          <img class="banner-swipeimage" :src="data.image" style="width:100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- end banner 广告 -->
    <div class="plank">
        <div class="plank-header">
          <div class="plank-header-title clearfix">
            <div class="l">
              <h2>热销</h2>
            </div>
            
          </div>
          <div>
            <div style="padding: .5rem"></div>
          <div style="padding: 0 7px">
            <Goods :data="hot" type="2" @getDetail="getDetail" />
          </div>
            <!-- <Goods :goods="hot" @getDetail="getDetail" /> -->
          </div>
        </div>
      </div>
    <div class="plank" v-for="(item,index) in recommend" :key="index">
      <div class="plank-header">
        <div class="plank-header-title clearfix">
          <div class="l">
            <h2>{{ item.title }}</h2>
          </div>
            <div class="r" @click="more">
                <span style="font-size: 12px;color: #666">全部</span>
              <van-icon name="arrow" />
            </div>
        </div>
        <div>
        </div>
      </div>
      <Goods :data="item.good" :type="2" :load="false" @getDetail="getDetail" />
    </div>
   <Copyright />
   <c-footer />
  </div>
</template>

<script>
import Copyright from '@/components/copyright.vue';
import I_header from "@/components/integralHeader";
import Goods from '@/common/goods/index.vue';
export default {
  name: "index",
  data() {
    return {
      accessToken:null,
      bannerImage:null,
      goods: null,
      userInfo:null,
      recommend: null,
      discount: null,
      discount:null,
      specialty: null,
      hot: null
    };
  },
  components: {
    I_header,
    Copyright,
    Goods
  },
  mounted(){
    this.accessToken = sessionStorage.getItem("token");
    this.getUserInfo();
    this.getData();
    this.getBannerData();
    
  },
  methods:{
    getUserInfo(){
      let accessToken = this.accessToken;
      this.axios.get('/api/wechatofficial/mine?token='+accessToken).then(result => {
        this.userInfo = result.data.data;
      })
    },
    getBannerData(){
      this.axios.get('/api/store/user/swiper/integralBanner',{
        token:this.accessToken
      }).then(result => {
        this.bannerImage = result.data.data
      })
    },
    getExchange(item){
      this.global.state.integral_goods = item;
      this.$router.push({name:'exchange',path:'integral/exchange'})
    },
    getData(){
      this.axios.get('/api/store/integral/hot?token='+this.global.state.accessToken  || sessionStorage.getItem("token"))
        .then(res=>{
          this.hot = res.data.data;
        }).catch(err=>err)
      this.axios.get('/api/store/integral/recommend?token='+this.global.state.accessToken  || sessionStorage.getItem("token"))
        .then(res=>{
          this.recommend = res.data.data;
          this.$store.state.integral_recommend_data = res.data.data;
        }).catch(err=>err)
    },
    getDetail(e){
      console.log(e);
      
      this.global.state.productStore_goods = e;
      this.$router.push({name:'productIntegral',path:'/product/integral'})
    },
    more(){
      this.$store.state.categoryListData = this.recommend;
      this.$router.push({
                name:'storeList',
                params:{type:'integral'}
            });
    }
}};

</script>
<style scoped>
.index-wrap {
  min-height: 100vh;
  padding-bottom:  50px;
}
.header-wrap {
  width: 100%;
  background: #3a3d46;
  height: 140px;
  position: relative;
}
.header {
  position: absolute;
  width: 90%;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 120px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: rgba(227,200,153,1);
  box-sizing: border-box;
  padding: 10px 15px;
}
.title p {
  margin: 0.25rem 0;
}
.plank-header {
  z-index: 2;
}
.plank-header-title {
  line-height: 44px;
}
.plank-header-title:nth-child(1) h2 {
  margin: 0;
}
.plank-header-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 262px;
  overflow: auto;
  box-shadow: 0 0 4px 2px rgba(170, 170, 170, 0.15);
  border-radius: 4px;
  padding: 10px 0;
}
.plank-header-container .item {
  text-align: center;
  width: 33.33%;
}
.item .item-info p {
  margin: 0;
  line-height: 16px;
}
.item .item-info p:nth-child(2) {
  color: #fce38a;
}
.footer {
  bottom: 0;
  left: 0;
  right: 0;
}
</style>